<template>
  <div class="h-100% flex flex-col overflow-auto">
    <div class="search">
      <a-space direction="vertical" :size="12">
        <a-date-picker
          v-model:value="search.time"
          placeholder="筛选备忘录日期"
        />
      </a-space>
    </div>
    <div class="content flex-1 flex mt-20">
      <div class="flex-1 flex h-100% overflow-auto p-5">
        <div class="flex-1 flex shadow-md rounded-10 overflow-hidden">
          <a-card class="card">
            <template #title>
              <span class="font-bold">未完成</span>
            </template>
            <Draggable
              v-model="thingList.wait.data"
              :animation="100"
              item-key="id"
              :forceFallback="true"
              @change="onMoveCallback"
              :move="getdata"
            >
              <template #item="{ element }">
                <div
                  class="p-10 bg-white rounded-5 flex flex-wrap flex-col shadow-md"
                  not-last:mb-20
                >
                  <div class="flex self-end">
                    <a-button
                      class="flex items-center justify-center ml-10"
                      shape="circle"
                      size="small"
                    >
                      <i
                        class="i-ant-design-drag-outlined block bg-blue-600"
                      ></i>
                    </a-button>
                    <a-popconfirm
                      title="是否标记为已完成？"
                      ok-text="确定"
                      cancel-text="取消"
                      @confirm="memorandumConfirm"
                    >
                      <a-button
                        class="flex items-center justify-center ml-10"
                        shape="circle"
                        size="small"
                      >
                        <i
                          class="i-ant-design-check-circle-outlined w-100% h-100% block bg-blue-600"
                        ></i>
                      </a-button>
                    </a-popconfirm>

                    <a-button
                      class="flex items-center justify-center ml-10"
                      shape="circle"
                      size="small"
                    >
                      <i
                        class="i-ant-design-edit-outlined block bg-blue-600"
                      ></i>
                    </a-button>
                    <a-popconfirm
                      title="操作不可逆！确定删除？"
                      ok-text="确定"
                      cancel-text="取消"
                      placement="left"
                    >
                      <a-button
                        class="flex items-center justify-center ml-10"
                        shape="circle"
                        size="small"
                      >
                        <i
                          class="i-ant-design-delete-outlined block bg-blue-600"
                        ></i>
                      </a-button>
                    </a-popconfirm>
                  </div>
                  <div class="flex flex-wrap pt-10">
                    <span>{{ element.label }}</span>
                  </div>
                </div>
              </template>
            </Draggable>
          </a-card>
        </div>
      </div>
      <div class="flex-1 flex h-100% overflow-auto p-5">
        <div class="flex-1 flex shadow-md rounded-10 overflow-hidden">
          <a-card class="card">
            <template #title>
              <span class="font-bold">已完成</span>
            </template>
            <Draggable
              v-model="thingList.finish.data"
              :animation="100"
              item-key="id"
              :forceFallback="true"
              @change="onMoveCallback"
              :move="getdata"
            >
              <template #item="{ element }">
                <div
                  class="p-10 bg-white rounded-5 flex flex-wrap flex-col shadow-md"
                  not-last:mb-20
                >
                  <div class="flex self-end">
                    <a-button
                      class="flex items-center justify-center ml-10"
                      shape="circle"
                      size="small"
                    >
                      <i
                        class="i-ant-design-drag-outlined block bg-blue-600"
                      ></i>
                    </a-button>
                    <a-popconfirm
                      title="是否标记为未完成？"
                      ok-text="确定"
                      cancel-text="取消"
                      @confirm="memorandumCancel"
                    >
                      <a-button
                        class="flex items-center justify-center ml-10"
                        shape="circle"
                        size="small"
                      >
                        <i
                          class="i-ant-design-exclamation-circle-outlined w-100% h-100% block bg-red-500"
                        ></i>
                      </a-button>
                    </a-popconfirm>
                    <a-button
                      class="flex items-center justify-center ml-10"
                      shape="circle"
                      size="small"
                    >
                      <i
                        class="i-ant-design-edit-outlined block bg-blue-600"
                      ></i>
                    </a-button>
                    <a-popconfirm
                      title="操作不可逆！确定删除？"
                      ok-text="确定"
                      cancel-text="取消"
                      placement="left"
                    >
                      <a-button
                        class="flex items-center justify-center ml-10"
                        shape="circle"
                        size="small"
                      >
                        <i
                          class="i-ant-design-delete-outlined block bg-blue-600"
                        ></i>
                      </a-button>
                    </a-popconfirm>
                  </div>
                  <div class="flex flex-wrap pt-10">
                    <span>{{ element.label }}</span>
                  </div>
                </div>
              </template>
            </Draggable>
          </a-card>
        </div>
      </div>
      <div class="flex-1 flex p-5">
        <div class="flex-1 flex shadow-md rounded-10 overflow-hidden">
          <a-card class="card">
            <a-radio-group v-model:value="formState.type" button-style="solid">
              <a-radio-button
                class="!rounded-10 mr-20 overflow-hidden"
                value="1"
                >今日</a-radio-button
              >
              <a-radio-button class="!rounded-10 b-1 overflow-hidden" value="2"
                >其他</a-radio-button
              >
            </a-radio-group>
            <a-form
              class="mt-20"
              :model="formState"
              v-bind="layout"
              name="nest-messages"
              :validate-messages="validateMessages"
              @finish="onFinish"
            >
              <a-form-item label="备忘录内容">
                <a-textarea
                  :rows="4"
                  v-model:value="formState.memorandum.introduction"
                />
              </a-form-item>
              <a-form-item label="同步到日历">
                <a-checkbox
                  v-model:checked="formState.memorandum.updataToCalendar"
                  >是</a-checkbox
                >
              </a-form-item>
              <a-form-item
                v-if="formState.type === '2'"
                name="date-picker"
                label="备忘录日期"
              >
                <a-date-picker
                  v-model:value="formState.memorandum.datePicker"
                  value-format="YYYY-MM-DD"
                />
              </a-form-item>
              <div class="flex w-100% justify-end">
                <a-button type="primary" html-type="submit">添加</a-button>
              </div>
            </a-form>
          </a-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import {
  CheckOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import Draggable from "vuedraggable";

let search = reactive({
  time: "",
});

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};

const formState = reactive({
  type: "1",
  memorandum: {
    datePicker: "",
    introduction: "",
    updataToCalendar: false,
  },
});

const validateMessages = {
  required: "${label} is required!",
  types: {
    email: "${label} is not a valid email!",
    number: "${label} is not a valid number!",
  },
  number: {
    range: "${label} must be between ${min} and ${max}",
  },
};

const onFinish = (values: any) => {
  console.log("Success:", values);
};

let thingList = reactive({
  wait: {
    data: [
      {
        label: "8:00 洗漱",
        id: 1,
        isflod: false,
      },
      {
        label: "8:10 跑步",
        id: 2,
        isflod: false,
      },
      {
        label: "8:10 跑步",
        id: 2,
        isflod: false,
      },
      {
        label: "8:10 跑步",
        id: 2,
        isflod: false,
      },
      {
        label: "8:10 跑步",
        id: 2,
        isflod: false,
      },
      {
        label: "8:10 跑步",
        id: 2,
        isflod: false,
      },
      {
        label: "8:10 跑步",
        id: 2,
        isflod: false,
      },
      {
        label: "8:10 跑步",
        id: 3,
        isflod: false,
      },
      {
        label: "8:10 跑步",
        id: 4,
        isflod: false,
      },
      {
        label: "8:10 跑步",
        id: 5,
        isflod: false,
      },
    ],
  },
  finish: {
    data: [
      {
        label: "模块1",
        id: 1,
        isflod: false,
      },
      {
        label: "模块222222222222222222222222222222222222222222222222222",
        id: 2,
        isflod: false,
      },
      {
        label: "模块3",
        id: 3,
        isflod: false,
      },
      {
        label: "模块4",
        id: 4,
        isflod: false,
      },
      {
        label: "模块5",
        id: 5,
        isflod: false,
      },
    ],
  },
});

const onMoveCallback = (val: any) => {
  console.log("拖动前的索引 :" + val.moved.newIndex);
  console.log("拖动后的索引 :" + val.moved.oldIndex);
};
const getdata = (val: any) => {
  console.log(val.draggedContext.element.id);
};
// 查看最新的数据
const submit = () => {
  console.log();
};

let memorandumConfirm = () => {};
let memorandumCancel = () => {};
</script>

<style scoped lang="less">
.card {
  display: flex;
  flex-direction: column;

  flex: 1;
  ::v-deep(.ant-card-body) {
    padding: 10px;
    flex: 1 1 auto;
    height: 0;
    overflow: auto;
  }
}
</style>
